<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('sidebar.home')}}</h2>
        </template>
		<template v-slot:header-right>
			<cly-select-x
                v-if="showComponentSelector"
                search-placeholder=""
                placeholder="i18n('dashboard.customize-home')"
                :title="i18n('dashboard.customize-home')"
                mode="multi-check-sortable"
                placement="bottom-end"
                :width="392"
                :auto-commit="false"
                :hide-default-tabs="true"
                :hide-all-options-tab="true"
				:searchable="false"
                :options="componentSelector"
				@input="setSelectedComponents"
                v-model="selectedDynamicComponents"
				showSelectedCount >
                <template v-slot:trigger>
                    <el-button size="small" icon="cly-icon-btn cly-icon-menu"> {{i18n('common.customize')}} </el-button>
                </template>
            </cly-select-x>
			<cly-more-options size="small" class="bu-ml-2" @command="selected">
				<el-dropdown-item command="download"  >
				  {{i18n('common.download')}} 
				</el-dropdown-item>
			</cly-more-options>
			
		</template>
    </cly-header>
	<cly-main>
		<div id="main_home_view">
			<div v-for="(item0, idx0) in topComponents" class="bu-pb-5 bu-mt-3">
				<component v-if="item0.component" v-bind:is="item0.component"></component>
			</div>
			<cly-date-picker-g class="bu-mt-2"></cly-date-picker-g>
			<div  v-for="(item, idx) in ordered"  class="componentBlock">
				<div v-if="item.itemgroup">
					<div class="bu-columns bu-is-gapless">
						<div  v-for="(item0, idx0) in item.data" v-if="registredComponents[item0._id]" class="bu-column bu-is-6">
							<div :class="item0.classes">
								<component v-if="registredComponents[item0._id].component" v-bind:is="registredComponents[item0._id].component"></component>
							</div>
						</div>
					</div>
				</div>
				<component v-else-if="registredComponents[item._id].component" v-bind:is="registredComponents[item._id].component"></component>
			</div>
			<cly-empty-view v-if="ordered.length ==0 && topComponents.length == 0 && !isLoading"
				:title="i18n('dashboard.empty-title')"
				:subTitle="i18n('dashboard.empty-text')">
			</cly-empty-view>
		</div>
	</cly-main>
</div>